<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>404 Not Found</title>
    <meta name="keywords" content="爱跑步,AiRunning,马拉松,跑步记录,马拉松日历,跑步数据,marathon"/>
    <meta name="description" content="爱跑步 AiRunning 记录你每一次跑步"/>
    <link rel="stylesheet" href="../../assets/css/404-style.css" type="text/css"/>
</head>
<body>

<div class="error-box" id="error-box">
    <div class="icon-box">
        <ul class="block-bg" id="icon-box"></ul>
        <div class="gps-box">GPS 无信号</div>
        <div class="gps-arrow-box" id="arrow-box">
            <div class="gps-arrow-circle" id="arrow">
                <div class="arrow"></div>
                <div class="dot"></div>
            </div>
        </div>
        <div class="pos-box">
            <div class="pos-circle" id="btn-pos">
                <div class="pos-line pos-row"></div>
                <div class="pos-line pos-col"></div>
                <div class="pos-dot">
                    <div class="dot"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="error-content">
        <h1>哦豁！页面没找到~ </h1>
        <h2>[ 404 NOT FOUND ]</h2>
        <p id="description"></p>
        <div class="btn-box">
            <a href="/" title="去首页">去首页看看</a>
        </div>
    </div>
</div>

<div class="copyright">&copy; 2020 - 2021 lglin.com</div>
</body>
<script>
    var text = [
        'Oops！大概你是跑步跑迷路了吧！',
        'Oops！你见或者不见我！我真的找不到啊！',
        '╮(╯▽╰)╭ 貌似你发现了一个未知的领域！',
        'emmm，我好像没找到！',
        '这里你找不到我的！我在首页等你，等你和我相遇！',
        '喵喵喵？你都做了啥？？？',
        '所以穿山甲到底说了啥？',
        '我是谁？我在哪？我做了什么？',
        '果然是单身狗！这都能让你发现！！！',
        'I have a pen, I have an apple en ~',
        '快看！有灰机！',
        '春风十里，我不想这里见到你！',
        '我王境泽就是饿死，从这里跳下去 ~ 真香',
        '打工是不可能的 ~',
        '网站404了解一下',
        '都是腰间盘，为啥你要这么突出！',
        '大吉大利，吃鸡不存在的！',
        '这个页面有没有，心里没点数吗？',
        'Sorry 有钱真的可以为所欲为！',
        '陈独秀同学！请坐下！！！'
    ];
    var arrowPos = {x:0,y:0};
    var arrow,errorBox,arrowBox,iconBox;
    var iconBoxTop = 0,iconBoxLeft = 0;
    var btnPos;
    var isCenter = true;
    var description;
    window.onload = function () {
        arrow = document.getElementById('arrow');
        arrowBox = document.getElementById('arrow-box');
        errorBox = document.getElementById('error-box');
        iconBox = document.getElementById('icon-box');
        btnPos = document.getElementById('btn-pos');
        description = document.getElementById('description');

        initBg(26,9);
        initArrow();

        description.innerText = text[Math.floor(Math.random()*text.length)];

        iconBox.onmousedown = function (e){setArrowPos(e);};
        btnPos.onmousedown = arrow2center;
        window.onresize = initArrow;
    };
    window.onmousedown = function (e) {
        var x = e.x;
        var y = e.y;
        var ax = arrowPos.x;
        var ay = arrowPos.y;
        var ox = Math.abs(ax - x);
        var oy = Math.abs(ay - y);
        var angle = 0;
        if(x > ax && y < ay)
            angle = 90 - (Math.atan(oy/ox) * 180 / Math.PI);
        else if(x < ax && y < ay)
            angle = 360 - (Math.atan(ox/oy) * 180 / Math.PI);
        else if(x < ax && y > ay)
            angle = 270 - (Math.atan(oy/ox) * 180 / Math.PI);
        else if(x > ax && y > ay)
            angle = 180 - (Math.atan(ox/oy) * 180 / Math.PI);
        arrow.style.transform = " rotate("+angle+"deg)";
    };
    function initBg(col,row) {
        var html = '';
        for(var i = 0; i < col;i++)
            html += "<li class='col'></li>";
        for(var j = 0; j < row;j++)
            html += "<li class='row'></li>";
        iconBox.innerHTML = html;
    }
    function initArrow() {
        var arW = arrowBox.offsetWidth;
        var arH = arrowBox.offsetHeight;
        var arT = arrowBox.offsetTop - (arH/2);
        var arL = arrowBox.offsetLeft - (arW/2);

        var boxT = errorBox.offsetTop - (errorBox.offsetHeight/2);
        var boxL = errorBox.offsetLeft - (errorBox.offsetWidth/2);

        arrowPos.y = boxT + arT + (arH/2) + 10;
        arrowPos.x = boxL + arL + (arW/2) + 10;

        iconBoxTop = boxT + 10;
        iconBoxLeft = boxL + 10;
    }
    function setArrowPos(e) {
        var x = e.x;
        var y = e.y;
        var ox = Math.abs(x - iconBoxLeft);
        var oy = Math.abs(y - iconBoxTop);
        isCenter = false;
        btnPos.className = "pos-circle active";
        arrowBox.style.left = ox+'px';
        arrowBox.style.top = oy+'px';
        initArrow();
    }
    function arrow2center() {
        if(isCenter) return;
        isCenter = true;
        btnPos.className = "pos-circle";
        arrowBox.removeAttribute("style");
    }
</script>
</html>